<template>
  <!-- 通知通告 -->
  <div id="notice">
    <div class="notice">
      <el-carousel height="30px" direction="vertical" indicator-position="none" :autoplay="true" :interval="5000"
        class="carousel-notice">
        <el-carousel-item v-for="item in notices" :key="item.id" class="carousel-notice-item">
          <el-link :type="item.type" :underline="false"><i :class="item.iconClass" class="notice-content"></i>
            &nbsp;{{ item.content }}&nbsp;&nbsp;&nbsp;{{ item.createTime | formatTimer }}
          </el-link>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
    name: 'my-notice',
    data () {
        return {
            notices: [{
                content: '测试通知公告004',
                createTime: '2022-09-10 09:09:04',
                iconClass: 'el-icon-message-solid',
                id: '1568526457916579841',
                sort: 0,
                status: '1',
                type: 'success',
                updateTime: '2022-09-10 09:40:59',
                version: 0
            }, {
                content: '测试通知公告003',
                createTime: '2022-09-10 09:09:04',
                iconClass: 'el-icon-message-solid',
                id: '1568526457916579842',
                sort: 0,
                status: '1',
                type: 'success',
                updateTime: '2022-09-10 09:40:59',
                version: 0
            }]
        }
    },
    filters: {
        formatTimer: function (value) {
            let date = new Date(value)
            let year = date.getFullYear()

            let month = date.getMonth() + 1
            month = month < 10 ? '0' + month : month

            let day = date.getDate()
            day = day < 10 ? '0' + day : day

            let hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour

            let minute = date.getMinutes()
            minute = minute < 10 ? '0' + minute : minute

            let second = date.getSeconds()
            second = second < 10 ? '0' + second : second

            console.log(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second)
            return year + '-' + month + '-' + day
        }
    },
    methods: {},
    created () {
    // 从vuex中获取公告列表，附值给notices对象
    // console.log(store.state.notices)
    // this.notices = store.state.notices
    },
    mounted () {

    }
}
</script>

<style scoped>
#notice {
  width: auto;
  height: 30px;
  padding: 0%;
  margin: 0px 0px 5px 0px;
  background-color: #ffffff;
}

/* 公告 */
.notice {
  width: auto;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

/* 轮播div */
.carousel-notice {
  width: auto;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 遍历的每一项 */
.carousel-notice-item {
  width: auto;
  height: 100%;
  color: white;
  line-height: 30px;
  margin-left: 10px;
  border-radius: 4px;
}

/* 公告内容 */
.notice-content {
  font-size: 12px;
  font-weight: 100;
  font-family: "Courier New", Courier, monospace;
}

/* 特殊标识 */
.text-hot {
  background-color: #f60;
  color: black;
  display: inline-block;
  padding: 0 2px;
  text-align: center;
  vertical-align: middle;
  font-style: normal;
  overflow: hidden;
  line-height: 18px;
  height: 16px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 200;
  margin-left: 6px;
}
</style>
